<template>
  <div ref="itemControlListRef" @scroll="scrollTop" class="timeline-itemControlList">
    <div class="timeline-itemControlList-item" v-for="item in listData">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="移除轨道"
        placement="top"
      >
        <el-button 
        v-if="item.actions[0].effectId != componentTypes.FLOW_EDIT.SPEECH"
        :disabled="isPlaying" size="small" @click="deleteTimeline(item)" text plain :icon="Delete" />
      </el-tooltip>

      <el-tooltip
        class="box-item"
        effect="dark"
        content="语音轨道"
        placement="top"
      >
      <el-button 
      v-if="item.actions[0].effectId == componentTypes.FLOW_EDIT.SPEECH"
       :disabled="isPlaying" size="small"  text plain :icon="ChatDotRound" />
      </el-tooltip>

      <el-tooltip
        class="box-item"
        effect="dark"
        content="删除关键帧"
        placement="top"
      >
      <el-button 
      v-if="item.actions[0].effectId != componentTypes.FLOW_EDIT.ACTION&&item.actions[0].effectId != componentTypes.FLOW_EDIT.SPEECH" 
      :disabled="isPlaying" 
      size="small" 
      @click="deleteKeyFrame(item)" 
      text plain 
      :icon="CircleCloseFilled" />
      </el-tooltip>

      <el-tooltip
        class="box-item"
        effect="dark"
        content="添加时间段"
        placement="top"
      >
      <el-button 
      :disabled="isPlaying" 
      size="small" 
      @click="addTimeLine(item)" 
      v-if="item.actions[0].effectId != componentTypes.FLOW_EDIT.ACTION&&item.actions[0].effectId != componentTypes.FLOW_EDIT.SPEECH" 
      text plain :icon="Plus" />
      </el-tooltip>

      <el-tooltip
        class="box-item"
        effect="dark"
        :content="'删除'+((item.actions[0].effectId == componentTypes.FLOW_EDIT.ACTION)?'动作':'时间段')"
        placement="top"
      >
      <el-button :disabled="isPlaying" size="small" 
      @click="removeTimeLineAction(item)" 
      v-if="item.actions[0].effectId != componentTypes.FLOW_EDIT.SPEECH"
       text plain :icon="Minus" />
      </el-tooltip>
    </div>
  </div>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import {
  Check,
  View,
  ChatDotRound,
  Delete,
  Unlock,
  Plus,
  Minus,
  CircleCloseFilled,
  Location
} from '@element-plus/icons-vue'
import { useSceneStore } from '@/stores/scene'
import { componentTypes, mittTypes } from '@/util/types';
import { getImageKeyframeStruct,getImageTimelineActionStruct,getVideoTimelineActionStruct,getSvgAnimTimelineActionStruct } from '@/util/struct';
import  {getCurrentInstance} from 'vue'
const { appContext : { config: { globalProperties } } } = getCurrentInstance();

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const sceneStore = useSceneStore();
const props = defineProps({
  timelineState: {
    type: Object,
    default: null
  },
  listData: {
    type: Array,
    default: []
  },
  scrollTop: {
    type: String,
    default: '0'
  },
})
const emit = defineEmits([
  'scrollTop'
])
const lockIcon = ref(Unlock)
const viewIcon = ref(View)
const itemControlListRef = ref()
const selectedActionId = ref(null)
const isPlaying = ref(false)

const setScrollTop = function(val){
  itemControlListRef.value.scrollTop = val
}
const scrollTop = function(){
  emit('scrollTop',itemControlListRef.value.scrollTop)
}
const deleteTimeline = function(item){
  let list
  switch(item.actions[0].effectId){
    case componentTypes.FLOW_EDIT.IMAGE:
    list =  sceneStore.currentFlowNode.imageList
      break;
    case componentTypes.FLOW_EDIT.VIDEO:
    list =  sceneStore.currentFlowNode.videoList
      break;
    case componentTypes.FLOW_EDIT.ACTION:
    list =  sceneStore.currentFlowNode.actionList
      break;
    case componentTypes.FLOW_EDIT.SVGANIM:
    list =  sceneStore.currentFlowNode.svgAnimList
      break;
  }
  
  list.forEach(function(element,index){
    if(element.id == item.id){
      list.splice(index,1)
      emitter.emit(mittTypes.TIMELINE.UPDATE_TIMELINE_DATA)
      emitter.emit(mittTypes.RENDERER.UPDATE_RENDER)
    }
  })
}
const lockTimeline = function(){

}
const hideTimeline = function(){

}
const addKeyframe = function(item){
  let data;
  switch(item.actions[0].effectId){
    case componentTypes.FLOW_EDIT.IMAGE:
    case componentTypes.FLOW_EDIT.VIDEO:
    data=getImageKeyframeStruct()
      break;
  }
  data.x = sceneStore.currentAttrItem.data.x
  data.y= sceneStore.currentAttrItem.data.y
  data.width= sceneStore.currentAttrItem.data.width
  data.height= sceneStore.currentAttrItem.data.height
  data.time = sceneStore.currentTimelineTime;
  
  data.opacity= sceneStore.currentAttrItem.data.opacity/100
  let keyframes = item.actions[0].data.keyFrames

  let setted = false

  if(sceneStore.currentTimelineTime<keyframes[0].time){
    //在时间轴前面
    setted = true;
    emitter.emit(mittTypes.TIMELINE.ADD_KEYFRAME,{
        data:data,
        index:0
      })
   
  }else if(sceneStore.currentTimelineTime>keyframes[keyframes.length-1].time){
    //在时间轴后面
    setted = true;
    emitter.emit(mittTypes.TIMELINE.ADD_KEYFRAME,{
        data:data,
        index:keyframes.length
      })
    
  }else{
    keyframes.forEach((element,index) => {
      if(element.time == sceneStore.currentTimelineTime){
        // 在某个关键帧上
        data.x = sceneStore.currentAttrItem.data.x
        data.y= sceneStore.currentAttrItem.data.y
        data.width= sceneStore.currentAttrItem.data.width
        data.height= sceneStore.currentAttrItem.data.height
        element.time = sceneStore.currentTimelineTime;

        data.opacity= sceneStore.currentAttrItem.data.opacity/100
        setted = true;
      }
    });
  }
  if(!setted){
    //在时间轴内
    let idx = 0;
    keyframes.forEach((element,index) => {
      if(sceneStore.currentTimelineTime>element.time  ){
        // 在两个关键帧区间内
        idx = index;
      }
    });
    emitter.emit(mittTypes.TIMELINE.ADD_KEYFRAME,{
        data:data,
        index:idx+1
      })
    
  }
  // sceneStore.currentFlowNode.
}
const removeKeyframe = function(){

}
const addTimeLine  = function(item){
  let action;
  let list
  switch(item.actions[0].effectId){
    case componentTypes.FLOW_EDIT.IMAGE:
    list =  sceneStore.currentFlowNode.imageList
    action = getImageTimelineActionStruct()
      break;
    case componentTypes.FLOW_EDIT.VIDEO:
    list =  sceneStore.currentFlowNode.videoList
    action = getVideoTimelineActionStruct()
      break;
    case componentTypes.FLOW_EDIT.SVGANIM:
    list =  sceneStore.currentFlowNode.svgAnimList
    action = getSvgAnimTimelineActionStruct()
      break;
  }
  action.start = sceneStore.currentTimelineTime
  action.end = sceneStore.currentTimelineTime+1

  action.data.title = item.actions[0].data.title
  // 设置为当前时间往后一秒的时间段
  action.data.keyFrames[0].x = sceneStore.currentAttrItem.data.x
  action.data.keyFrames[0].y= sceneStore.currentAttrItem.data.y
  action.data.keyFrames[0].width= sceneStore.currentAttrItem.data.width
  action.data.keyFrames[0].height= sceneStore.currentAttrItem.data.height
  action.data.keyFrames[0].time = sceneStore.currentTimelineTime;

  action.data.keyFrames[1].x = sceneStore.currentAttrItem.data.x
  action.data.keyFrames[1].y= sceneStore.currentAttrItem.data.y
  action.data.keyFrames[1].width= sceneStore.currentAttrItem.data.width
  action.data.keyFrames[1].height= sceneStore.currentAttrItem.data.height
  action.data.keyFrames[1].time = sceneStore.currentTimelineTime+1;

  list.forEach(function(element){
    if(element.id == item.id){
      element.timelineData.actions.push(action)
    }
  })

  emitter.emit(mittTypes.RENDERER.UPDATE_RENDER)
  emitter.emit(mittTypes.TIMELINE.UPDATE_TIMELINE_DATA)

  emitter.emit(mittTypes.LAYOUT.SHOW_CENTER_RIGHT,true)
  emitter.emit(mittTypes.ATTR.SELECT_ITEM, {
    type:item.actions[0].effectId,
    data:action,
    actionId:action.id
  })
}
const removeTimeLineAction  = function(item){
  if(item.actions.length>1){
    item.actions.forEach(function(action,index){
      if(selectedActionId.value == action.id){
        item.actions.splice(index,1)
      }
    })
  }else{
    deleteTimeline(item)
  }
  emitter.emit(mittTypes.ATTR.SELECT_ITEM,null)
  
  
}
const deleteKeyFrame  = function(item){
  item.actions.forEach(function(action){
    action.data.keyFrames.forEach(function(keyframe,index){
      if(index!=0&&index!= action.data.keyFrames.length-1){
        if(keyframe.time == sceneStore.currentTimelineTime){
          action.data.keyFrames.splice(index,1)
          emitter.emit(mittTypes.RENDERER.UPDATE_RENDER)
          emitter.emit(mittTypes.TIMELINE.UPDATE_TIMELINE_DATA)
        }
      }
    })
  })
}

onMounted(() => {
    // let engine = props.timelineState

   
    if (!props.timelineState) return;
    const engine = props.timelineState;
    engine.listener.on('play', () => {
      isPlaying.value = true
    });
    engine.listener.on('paused', () => {
      isPlaying.value = false
    });

    emitter.on(mittTypes.ATTR.SELECT_ITEM, function(val){
      if(val){
        selectedActionId.value = val.actionId
      }else{
        selectedActionId.value = null
      }
      
    })
   
})
defineExpose({
  setScrollTop
})
</script>
<style scoped>
/* 定义滚动条的宽度和背景颜色 */
::-webkit-scrollbar {
width: 6px;
background-color: #000000;
}

/* 定义滚动条轨道的样式，包括内阴影和圆角 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #121212;
}

/* 定义滑块的样式，包括圆角和内阴影 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #303030;
}
</style>